<template>
  <el-popover width="300" popper-class="backgroud-black" trigger="hover">
    <div style="color: darkgray; text-align: right;">
      已输入字符长度
      <span style="color: red; font-weight: bold">{{value? value.length: 0}}</span>
    </div>

    <el-input slot="reference" @input="$emit('input',$event)" :value="value">
      <template slot="suffix">
        <div>
          <el-popover placement="top" width="325" trigger="click">
            <slot name="suffix-content">
              <div>
                <div class="blink ng-scope" style="position: absolute; border: 2px solid red; width: 200px; height: 29px; top: 142px; left: 95px;">
                </div>
                <img src="@/assets/images/vehicleLicense.png" alt="" style="width: 300px" />
              </div>
            </slot>
            <el-button type="text" slot="reference" icon="el-icon-question">
            </el-button>
          </el-popover>
        </div>

      </template>
    </el-input>
  </el-popover>

</template>

<script>
export default {
  name: 'index',
  data(){
    return{
    }
  },
  props:{
    minLength: {
      type: Number,
      default: 0
    },
    maxLength: {
      type: Number,
      default: 11
    },
    value: {
      type: String,
      default: ''
    },
  },
  watch:{

  }
}
</script>

<style scoped>

</style>
